<template>
  <el-dialog
      v-model="dialogVisible"
      title="添加房屋信息"
      width="30%"
      :before-close="handleClose"
      center
  >
    <el-form ref="validateForm" :model="houseForm" :rules="houseRules" label-width="120px" class="demo-dynamic" status-icon>
      <el-form-item label="房屋名称" prop="house_name">
        <el-input v-model="houseForm.house_name" placeholder="Enter house_name...">

        </el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="houseForm.address" placeholder="Enter address...">

        </el-input>
      </el-form-item>
      <el-form-item label="家庭编号 " prop="family_id">
        <el-input v-model="houseForm.family_id" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="地区编号 " prop="region_id">
        <el-input v-model="houseForm.region_id" placeholder="Enter region_id...">

        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitAdd">添加房屋</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => {
          closeDialog(false);
        }">取消</el-button>
        <el-button type="primary" @click="() => {
          closeDialog(false);
        }"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script >
import {reactive, toRefs, ref} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
function houseAdd(validateForm, state, emit){
  const submitAdd = () => {
    validateForm.value.validate((valid) => {
      console.log(valid)
      if (valid){
        const params = {
          house_name: state.houseForm.house_name,
          address: state.houseForm.address,
          family_id: parseInt(state.houseForm.family_id),
          region_id: parseInt(state.houseForm.region_id),
        };
        console.log(params)
        axios.post("/api/house", (params)).then((res) => {
          console.log("sss")
          //重置表单
          validateForm.value.resetFields()
          console.log(res.data)
          emit('onCloseDialog', false, res.data)
        })
      }
    })
  };
  return {
    submitAdd
  }
}
export default {
  name: "AddUser",
  props: {
    dialogVisible:Boolean
  },
  emits: ["onCloseDialog"],
  setup(props, {emit}) {
    const validateForm = ref();
    const state=reactive({
      dialogVisible:props.dialogVisible,
      houseForm:{
        house_name:"",
        address:"",
        family_id:0,
        region_id:1
      }
    });
    const houseRules = {
      house_name: [{required: true, message: 'Please input house_name', trigger: 'blur',}],
      address: [{required: true, message: 'Please input address', trigger: 'blur',}],
      family_id: [{required: true, message: 'Please input family_id', trigger: 'blur',}],
      region_id: [{required: true, message: 'Please input region_id', trigger: 'blur',}],
    }
    const closeDialog = (visible) => {
      emit('onCloseDialog', visible)
    }
    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
    return {
      state,
      ...toRefs(state),
      handleClose,
      closeDialog,
      houseRules,
      validateForm,
      ...houseAdd(validateForm, state, emit),
    }
  }
}
</script>

<style scoped>

</style>